<template>
  <div>
    <div style="margin:10px auto;width: 1200px;display: flex;flex-direction: column;">
      <div>
        <p style="margin: 10px 0 20px 10px;font-size: 24px;width:100%">
          我的授课
          <el-button type="primary" @click="onAddCourse" style="float: right;margin:0 50px 0 0">添加课程</el-button>
        </p>
        <div v-if="courseList.length!==0" style="width: 100%;min-height: 780px">
        <el-col style="width: 238px;height:262px;margin: 10px auto 28px;padding: 10px"
                v-for="item in courseList" :key="item.courseId"
                :offset="item.courseId > 0 ? 2 : 0">
          <a @click="on_courseCard(item.courseId)" style="text-decoration: none;cursor:pointer;">
            <el-card :body-style="{ padding: '0px'}" style="border-radius: 12px">
              <img :src="`http://localhost:8089/upload/${item.cover}`"
                   class="k-image"/>
              <div style="height: 126px;padding: 10px 12px;position: relative;">
                <p style="font-weight: bold;color:#333333;margin: 0">{{ item.courseName }}</p>
                <p style="color:#666666;margin: 0">{{ item.schoolName }}</p>
                <p style="color: #999999;margin: 0">{{ item.userName }}</p><!--添加教师团队-->
                <p style="margin: 40px 0 0;float: right;color: #999999">{{ item.attendNum }}人参加</p>
              </div>
            </el-card>
          </a>
        </el-col>
        </div>
        <el-empty v-else description="该板块没有课程哦，看看其他板块吧"></el-empty>
      </div>
      <el-pagination
          v-if="courseList.length!==0"
          @size-change="handleSizechange"
          @current-change="getPage"
          :current-page="currentPage"
          :page-sizes="[10,15,20]"
          :page-size="pageSize"
          layout="total,sizes,prev,pager,next,jumper"
          :total="total"
          style="text-align: center;margin-top: 20px">
      </el-pagination>
    </div>
  </div>
</template>

<script>

export default{
  name:"CourseEditListView",
  data(){
    return{
      coursetypeId:'',
      courseList:[],
      currentPage: 1,
      pageSize: 10,
      total: 10,
    }
  },
  methods:{
    getCourseByCourseType(coursetypeId) {
      this.$axios({
        method: 'get',
        url: `http://localhost:8089/course/selectCourseByCoursetypeId/${coursetypeId}`
      }).then(res => {
        this.courseList = res.data.dataobject;
      }).catch(err => console.log(err));
    },
    on_courseCard(courseId) {
      console.log(courseId);
      window.open(this.$router.resolve({path: `/CourseHomeEdit/${courseId}`}).href, '_blank');
    },
    onAddCourse(){
      window.open(this.$router.resolve({path: `/addCourse`}).href, '_blank');
    },
    handleSizechange(size) {
      this.pageSize = size;
      this.getPage(1);
    },
    getPage(current = 1) {
      this.currentPage = current;
      this.$axios({
        method: 'get',
        url: `http://localhost:8089/user/course/getPageByUserId/${this.currentPage}/${this.pageSize}`,
      }).then(res => {
        this.total = res.data.dataobject.total;
        this.courseList = res.data.dataobject.pageList;
      }).catch(err => console.log(err));
    },
  },
  created() {
    this.getPage();
  }
}
</script>

<style scoped>
</style>